1.this.state
组件免不了要与用户互动,React 的一大创新,就是将组件看成是一个状态机,一开始有一个初始状态,然后用户互动,导致状态变化,从而触发重新渲染 UI
1 var TestStateComponent = React.createClass({ 2 getInitialState: function () { 3 return { 4 liked: false 5 } 6 }, 7 handleClick: function (event) { 8 this.setState({ 9 liked: !this.state.liked10 })11 },12 render: function () {13 var text = this.state.liked ? "like" : "haven't liked"14 return (1516 You {text} this Click to toggle17
18 )19 }20 })21 ReactDOM.render(,document.getElementById('container'))
上面代码是一个 TestStateComponent 组件,它的 getInitialState 方法用于定义初始状态,也就是一个对象,这个对象可以通过 this.state 属性读取。当用户点击组件,导致状态变化,this.setState 方法就修改状态值,每次修改以后,自动调用 this.render 方法,再次渲染组件。
由于 this.props 和 this.state 都用于描述组件的特性,可能会产生混淆。一个简单的区分方法是,this.props 表示那些一旦定义,就不再改变的特性,而 this.state 是会随着用户互动而产生变化的特性。
2.表单
1 2 var Input = React.createClass({ 3 getInitialState: function () { 4 return { 5 inputVal: '' 6 } 7 }, 8 handleChange: function (event) { 9 console.log(event.target.value)10 this.setState({11 inputVal: event.target.value12 })13 },14 render: function () {15 var value = this.state.inputVal16 return (1718 1921 )22 }23 })24 25 ReactDOM.render(,document.getElementById('container')){value}
20
3.Ajax
1 var UserList = React.createClass({ 2 getInitialState: function () { 3 return { 4 userName: '', 5 lastGisUrl 6 } 7 }, 8 componentDidMunt: function () { 9 $.get(this.props.source, function (res) {10 var lastDist = res[0]11 this.setState({ 12 username: lastGist.owner.login, 13 lastGistUrl: lastGist.html_url 14 }); 15 }.bind(this))16 })17 },18 19 componentWillUnmount: function() { 20 this.serverRequest.abort()21 },22 render: function() {23 return (2425 {this.state.username}'s last gist is26 here.2728 )29 }30 })31 34 ReactDOM.render(35,36 document.getElementById('container')37 )38